<template>
	<view>
		
		<picker @change="PickerChange" :value="picker[pickerIndex].id"
		:data-selecthx="picker[pickerIndex].position"
		:range="picker" :range-key="'position'">
			<view class="picker pick-style">
				{{pickerIndex>-1?picker[pickerIndex].position:'全部职位'}}
			</view>
		</picker>
		
		<view class="margin-top" v-for="(item,index) in interviewList" :key="index" @tap="toDetail(item)">
			<view class="cu-card article no-card margin-top">
				<view class="cu-item shadow">
					<view class="padding flex align-center">
						<image
						style="width: 80rpx; height: 80rpx; border-radius: 50%;"
						src="https://www.newzhihu.com/mvue/image/userImg.png"
						mode="aspectFill"></image>
						<view style="margin-left: 30rpx;">
							<view class="text-cut">
								{{ item.username }}
							</view>
							<view class="text-gray" style="font-size: 25rpx;">
								{{ item.userdes }}
							</view>
						</view>
					</view>
					<view class="content flex-direction">
						<view class="desc solid-bottom">
							<view class="text-content"> 
								{{ item.ms_content }}
							</view>
						</view>
						<view class="flex justify-between align-center" style="margin-top: 20rpx;">
							<view class="text-gray" style="font-size:25rpx">
								{{ item.user_time }}
							</view>
							<view class="flex">
								<view style="margin-right: 20rpx;">
									<text class='cuIcon-mark text-gray'></text>
									<text class="text-gray" style="font-size: 25rpx;">
										{{ item.comNum }}
									</text>
								</view>
								<view style="margin-right: 20rpx;">
									<text class='cuIcon-like text-gray'></text>
									<text class="text-gray" style="font-size: 25rpx;">
										{{ item.allZan }}
									</text>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- vip阴影 -->
		<VipMask></VipMask>
	</view>
</template>

<script>
	
	import VipMask from '../../../../components/VipMask.vue'
	
	export default{
		components: {
			VipMask
		},
		watch: {
			loading(newValue, oldValue) {
				if(newValue){
					uni.showLoading({
						title: '加载中'
					});
				}else{
					uni.hideLoading();
				}
			}
		},
		created() {
			this.fatchPosition()
			this.fatchData()
		},
		data() {
			return {
				loading: false,
				picker: [],
				pickerIndex: -1,
				zhiwei: 0,
				interviewList: [],
				page: 1
			}
		},
		props: {
			companyId: {
				type: String,
				default: '',
			},
		},
		onReachBottom(){
			this.page += 1
			this.fatchData()
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url: '/pages/detail/function/interview/interview?interviewId=' + item.id
				})
			},
			handleImg(){
				return this.$api.baseUrl + 'mvue/image/userImg.png'
			},
			PickerChange(e) {
				console.log(e)
				this.pickerIndex = e.detail.value
				this.zhiwei = this.picker[this.pickerIndex].id
				this.fatchData()
			},
			async fatchPosition(){
				this.loading = true
				// 获取职位列表
				let position = await this.$api.queryInterviewPosition({
					key: this.$util.getKey(),
					company_id: this.companyId,
					uid: this.$util.getUid()
				})
				this.loading = false
				if(position && position.data && position.data.data){
					console.log(position.data.data)
					this.picker = position.data.data
				}
			},
			async fatchData() {
				this.loading = true
				// 获取面试列表
				let res = await this.$api.queryInterview({
					key: this.$util.getKey(),
					company_id: this.companyId,
					zhiwei: this.zhiwei,
					page: this.page,
					order: '',
					uid: this.$util.getUid()
				})
				this.loading = false
				if(res && res.data && res.data.data){
					if(this.page == 1){
						this.interviewList = res.data.data
					}else{
						this.interviewList = this.interviewList.concat(res.data.data)
					}
				}
			},
		},
	}
</script>

<style>
	.pick-style{
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		background-color: #E7EBED;
		
	}
</style>
